<template>
	<u-mask :show="show">
		<view class="ClipBoard-dialog-container">
			<image src="@/static/common/search-icon2.png" class="ClipBoard-search-icon"></image>
			<view class="ClipBoard-dialog-title">是否要搜索以下内容</view>
			<scroll-view scroll-y="true" class="ClipBoard-content-scrollView">
				<view class="ClipBoard-content">{{ ClipBoardText }}</view>
			</scroll-view>
			<view @click="toSearch" class="ClipBoard-search-btn">立即搜索</view>
			<view @click="toTransLink" class="transform-link">去转链</view>

			<image @click="closeDialog" src="@/static/common/close-icon.png" class="ClipBoard-close-icon"></image>
		</view>
	</u-mask>
</template>

<script setup>
import { ref } from 'vue';
import { useUserStore } from '@/store/userStore.js';
import { getTransformLinkH5Url } from '@/api/home.js';

const userStore = useUserStore();

const props = defineProps({
	ClipBoardText: {
		type: String,
		default: ''
	}
});

const show = defineModel();

const closeDialog = () => {
	show.value = false;
};

const toSearch = () => {
	show.value = false;
	uni.navigateTo({
		url: '/subPages/searchGoodsList/index?goodsKeywords=' + props.ClipBoardText
	});
};

const toTransLink = async () => {
	isLogin();

	uni.showLoading();
	let res = await getTransformLinkH5Url();
	uni.hideLoading();
	if (res.code == 0) {
		closeDialog();
		
		let newLink = res.data.chainTurn + '?link=' + props.ClipBoardText
		
		uni.navigateTo({
			url: `/subPages/subWebView/index?url=${encodeURIComponent(newLink)}`
		});
	}
};

// 判断登录
const isLogin = () => {
	if (!userStore.access_token) {
		uni.navigateTo({
			url: '/subPages/login/index'
		});
		
		throw new Error('去登录！！！')
	}
};
</script>

<style lang="scss">
.ClipBoard-dialog-container {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 80%;
	text-align: center;
	padding: 12px;
	background-color: #fff;
	border-radius: 24px;
	z-index: 999;

	.ClipBoard-search-icon {
		width: 30px;
		height: 30px;
		margin-bottom: 8px;
	}

	.ClipBoard-dialog-title {
		font-size: 14px;
		font-weight: 600;
		text-align: center;
		margin-bottom: 12px;
	}

	.ClipBoard-content-scrollView {
		max-height: 200px;
		margin-bottom: 12px;
	}

	.ClipBoard-content {
		font-size: 12px;
		font-weight: 400;
		line-height: 16px;
		text-align: center;
		overflow-y: scroll;
	}

	.ClipBoard-search-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		font-size: 14px;
		font-weight: 500;
		line-height: 22.4px;
		width: 100%;
		height: 50px;
		border-radius: 34px;
		margin-bottom: 12px;
		background: linear-gradient(90deg, #ff0309 0%, #ff6c2a 100%);
	}

	.transform-link {
		position: relative;
		color: #ff0309;
		font-size: 12px;
		text-align: center;

		&::after {
			content: '';
			position: absolute;
			top: 40%;
			right: calc(100vw / 2 - 95px);
			transform: translateY(-50%);
			transform: rotate(45deg);
			display: inline-block;
			width: 5px;
			height: 5px;
			border-top: 1px solid #ff0309;
			border-right: 1px solid #ff0309;
		}
	}

	.ClipBoard-close-icon {
		position: absolute;
		width: 32px;
		height: 32px;
		left: 50%;
		bottom: -50px;
		transform: translateX(-50%);
	}
}
</style>
